import React from 'react';
import { Tabs, Button, message, Modal, Row, Col } from 'antd';

import { WeaDialog, WeaLocaleProvider, WeaTools, WeaSearchGroup, WeaInput, WeaNewScroll, WeaTable, WeaInputNumber, WeaSelect, WeaCheckbox } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;
const TabPane = Tabs.TabPane;
import Add from './add';
import { WeaPortalShare } from 'weaPortalPublic';

class Setting extends React.Component {
    state={
        visiable: false,
        addVisiable: false,
        setId: -1,
        isSaveAs: false,
        selectedRowKeys: [],
    }

    setSetting = (config) => {
        let data = this.props.data;
        let setting = Object.assign(data.setting, config);
        data.setting = setting;
        this.props.setStateData({ data });
    }


    setStateData = (data) => {
        this.setState(data);
    }

    onShow = ()=>{
        this.setState({visiable:true});
    }

    onCancle = () => {
        this.props.onLoad();
        this.setState({ selectedRowKeys: [] ,visiable:false});
    }

    onOk = () => {
        const { javaInterface } = this.props;
        const { id, setting } = this.props.data;
        WeaTools.callApi(javaInterface.update, 'POST', { json: JSON.stringify({ id, setting: JSON.stringify(setting) }) }).then((result) => {
            if (result.status == true) {
                this.onCancle();
                message.success(getLabel(83551, '保存成功！'), 3);
            } else {
                message.error(getLabel(84544, '保存失败！'), 3);
            }
        });
    }


    delete = (ids) => {
        const { javaInterface } = this.props;
        Modal.confirm({
            title: getLabel(15172, '系统提示'),
            content: getLabel(385625, '确定要删除选择的记录吗？'),
            onOk: () => {
                WeaTools.callApi(javaInterface.deleteItem, 'POST', { json: JSON.stringify(ids) }).then((result) => {
                    if (result.status == true) {
                        this.props.onLoad({ handlerType: 'deleteItem' });
                        message.success(getLabel(83551, '保存成功！'), 3);
                    } else {
                        message.error(getLabel(84544, '保存失败！'), 3);
                    }
                });
            },
        });
    }

    deleteAll = (ids) => {
        const { javaInterface } = this.props;
        Modal.confirm({
            title: getLabel(15172, '系统提示'),
            content: getLabel(385625, '确定要删除选择的记录吗？'),
            onOk: () => {
                WeaTools.callApi(javaInterface.deleteItem, 'POST', { json: JSON.stringify(ids) }).then((result) => {
                    if (result.status == true) {
                        this.setState({ selectedRowKeys: [] });
                        this.props.onLoad({ handlerType: 'deleteItem' });
                        message.success(getLabel(83551, '保存成功！'), 3);
                    } else {
                        message.error(getLabel(84544, '保存失败！'), 3);
                    }
                });
            },
        });
    }


    getColumns = () => {
        const { onGetColsAfterHandler, id, layoutType, showSharing, rewriteShareComponent } = this.props;
        let columns = [{
            title: getLabel(195, '名称'),
            dataIndex: 'title',
            key: 'title',
            width: '50%',
        }, {
            title: getLabel(30585, '操作'),
            key: 'operation',
            width: '50%',
            render: (text, record) => (
                <div>
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@k7lmv8@${record.id}`} type="primary" size="small" onClick={() => { this.setState({ addVisiable: true, setId: record.id }); }}>{getLabel(30747, '设置')}</Button>
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@4snill@${record.id}`} className="button-spaceing" type="primary" size="small" onClick={() => { let ids = []; ids.push(record.id); this.delete(ids); }}>{getLabel(91, '删除')}</Button>
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@247np7@${record.id}`} className="button-spaceing" type="primary" size="small" onClick={() => { this.setState({ addVisiable: true, setId: record.id, isSaveAs: true }); }}>{getLabel(506965, '另存为')}</Button>
                    {
                        layoutType == 'theme' && showSharing == true && rewriteShareComponent != true ? (
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@h5d72u@${record.id}`} className="button-spaceing" type="primary" size="small" onClick={() => { this.share.onLoad({ element: id, app: record.id }); }}>{getLabel(521029, '共享范围')}</Button>
                        ) : null
                    }
                </div>
            ),
        }];

        if (onGetColsAfterHandler) {
            onGetColsAfterHandler(columns);
        }
        return columns;
    }

    getDatas = () => {
        const { onGetDataAfterHandler } = this.props;
        let items = this.props.data.itemsForSetting;
        let datas = [];
        for (let i in items) {
            if (Object.prototype.hasOwnProperty.call(items, i)) {
                datas.push({
                    key: items[i].id,
                    id: items[i].id,
                    title: items[i].setting.title,
                });
            }
        }
        if (onGetDataAfterHandler) {
            onGetDataAfterHandler(datas);
        }
        return datas;
    }

    onSelectChange = (selectedRowKeys) => {
        this.setState({
            selectedRowKeys,
        });
    }

    drop = (datas) => {
        const { javaInterface } = this.props;
        let query = [];
        for (let i in datas) {
            query.push({ id: datas[i].id, orderIndex: parseInt(i) + 1 });
        }

        if (query.length > 1) {
            WeaTools.callApi(javaInterface.orderItem, 'POST', { json: JSON.stringify(query) });
        }
    }

    render() {
        const {visiable} = this.state
        const { uuid, AddExtend, SettingExtend, SettingExtendByEcode, SettingStyleExtend, SettingStyleExtendByEcode, javaInterface, data, hideSource, WeaPortalShareComponent, layoutType, showSharing, rewriteShareComponent } = this.props;
        const { styles = [], setting } = data;
        let _SettingExtend = null;
        if (SettingExtendByEcode && window.rewritePortalCusEleSetting && typeof rewritePortalCusEleSetting == 'function') {
            _SettingExtend = window.rewritePortalCusEleSetting({ ...this.props, setting, setSetting: this.setSetting }, { id: uuid, componentName: 'SettingExtend' });
        }
        let _SettingStyleExtend = null;
        if (SettingStyleExtendByEcode && window.rewritePortalCusEleSetting && typeof rewritePortalCusEleSetting == 'function') {
            _SettingStyleExtend = window.rewritePortalCusEleSetting({ ...this.props, setting, setSetting: this.setSetting }, { id: uuid, componentName: 'SettingStyleExtend' });
        }

        const { title_base64, styleId, tabWidthType, tabWidth, showTab } = setting;
        const rowSelection = {
            selectedRowKeys: this.state.selectedRowKeys,
            onChange: this.onSelectChange,
            getCheckboxProps: record => ({
                    disabled: (record.createBySystem == 1 && this.props.container.isSystem == 0), // 配置无法勾选的列
                }),
        };
        const tabWidthTypeOptions = [{
            key: '0',
            showname: getLabel(501539, '固定宽度'),
        }, {
            key: '1',
            showname: getLabel(128975, '自适应'),
        }];

        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@cu7k8i`}
              title={getLabel(30747, '设置')}
              visible={visiable}
              iconBgcolor="#1a57a0"
              hasScroll={false}
              style={{ width: 900, height: 500 }}
              onCancel={() => { this.onCancle(); }}
            >
                <div className="custom-element-setting">
                    <div className="top">
                        <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@8b0p0o`} defaultActiveKey="1" className="portal-esetting-tabs" onChange={() => {}}>
                            <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@zroyhh`} tab={getLabel(33368, '内容')} key="1">
                                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@k2cm55`} title={getLabel(81711, '基本信息')} needTigger={true} showGroup={true}>
                                    <div className="set-items">
                                        <div className="set-item">
                                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@3dkjej`} type="flex" middle="middle">
                                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@48xt1l`} span={6} >
                                                    <div className="item-title">{getLabel(508544, '标题')} :</div>
                                                    <div className="middle-box" />
                                                </Col>
                                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@e9o3tf`} span={18}>
                                                    <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@e34dwg`} value={title_base64} viewAttr={2} inputType={'multilang'} isBase64={true} onChange={value => this.setSetting({ title_base64: value })} />
                                                </Col>
                                            </Row>
                                        </div>
                                        {
                                            SettingExtend ? (
                                                <SettingExtend ecId={`${this && this.props && this.props.ecId || ''}_SettingExtend@blst5d`} setting={setting} setSetting={this.setSetting} />
                                            ) : null
                                        }
                                        {
                                            SettingExtendByEcode ? (
                                                _SettingExtend
                                            ) : null
                                        }
                                    </div>
                                </WeaSearchGroup>
                                {
                                    !hideSource ? (
                                        <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@j3l9j6`} title={getLabel(20885, '内容来源')}
                                          needTigger={true}
                                          showGroup={true}
                                          customComponent={
                                            <div>
                                                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@x77wqb`} type="primary" onClick={() => { this.setState({ addVisiable: true, setId: -1 }); }} >
                                                    {getLabel(611, '添加')}
                                                </Button>
                                                {
                                                    this.state.selectedRowKeys.length > 0
                                                        ? (
                                                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@o2yk00`} type={'primary'} className="button-spaceing" onClick={() => { this.deleteAll(this.state.selectedRowKeys); }} >{getLabel(32136, '批量删除')}</Button>
                                                        )
                                                        : (
                                                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@rxt4ta`} type={'ghost'} className="button-spaceing" >{getLabel(32136, '批量删除')}</Button>
                                                        )
                                                }
                                            </div>


                                        }
                                        >
                                            <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@1v0cqu`} height="100%">
                                                <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@fin95p`} rowSelection={rowSelection} columns={this.getColumns()} dataSource={this.getDatas()} pagination={false} draggable={true} onDrop={this.drop} />
                                            </WeaNewScroll>
                                        </WeaSearchGroup>
                                    ) : null
                                }


                            </TabPane>
                                <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@54x8gg`} tab={getLabel(1014, '样式')} key="2">
                                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@s4v3k8`} title={getLabel(81711, '基本信息')} needTigger={true} showGroup={true}>

                                    <div className="set-items">
                                        <div className="set-item">
                                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@wh28wj`} type="flex" middle="middle">
                                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@3sg1n4`} span={6} >
                                                    <div className="item-title">{getLabel(22913, '元素样式')} :</div>
                                                    <div className="middle-box" />
                                                </Col>
                                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@1vgwsi`} span={18}>
                                                    <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@uxr4dv`} options={styles} value={styleId} onChange={value => this.setSetting({ styleId: value })} />
                                                </Col>
                                            </Row>
                                        </div>
                                        <div className="set-item">
                                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@bmywbi`} type="flex" middle="middle">
                                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@1ynksf`} span={6} >
                                                    <div className="item-title">{getLabel(501540, 'tab页宽度')} :</div>
                                                    <div className="middle-box" />
                                                </Col>
                                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@wnkzqo`} span={18}>
                                                    <div style={{ display: 'inline-block', width: '20%' }}>
                                                        <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@5fabeo`} options={tabWidthTypeOptions} value={tabWidthType} onChange={value => this.setSetting({ tabWidthType: value })} />
                                                    </div>
                                                        {
                                                        tabWidthType == 0 ? (
                                                            <div style={{ display: 'inline-block', width: '80%', 'padding-left': '20px' }}>
                                                                <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@j99omi`} value={tabWidth} viewAttr={2} onChange={value => this.setSetting({ tabWidth: value })} />
                                                            </div>
                                                        ) : null
                                                    }

                                                </Col>
                                            </Row>
                                        </div>
                                        <div className="set-item">
                                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@38xyeo`} type="flex" middle="middle">
                                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@wfztv2`} span={6} >
                                                    <div className="item-title">{getLabel(512604, '单tab显示')} :</div>
                                                    <div className="middle-box" />
                                                </Col>
                                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@1d0rq5`} span={18}>
                                                    <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@xpa9xk`}
                                                      value={showTab}
                                                      display="switch"
                                                      style={{ display: 'inline' }}
                                                      onChange={(value) => {
                                                            this.setSetting({ showTab: value });
                                                        }}
                                                    />
                                                </Col>
                                            </Row>
                                        </div>
                                        {
                                            SettingStyleExtend ? (
                                                <SettingStyleExtend ecId={`${this && this.props && this.props.ecId || ''}_SettingStyleExtend@hto2nh`} setting={setting} setSetting={this.setSetting} />
                                            ) : null
                                        }
                                        {
                                            SettingStyleExtendByEcode ? (
                                                _SettingStyleExtend
                                            ) : null
                                        }
                                    </div>
                                </WeaSearchGroup>

                            </TabPane>
                        </Tabs>
                    </div>
                    <div className="bottom">
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@114krs`} type="primary" onClick={() => { this.onOk(); }}>{getLabel(30986, '保存')}</Button>
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@rvwnkc`} type="ghost" style={{ marginLeft: '10px' }} onClick={() => { this.onCancle(); }}>{getLabel(31129, '取消')}</Button>
                    </div>
                    <Add ecId={`${this && this.props && this.props.ecId || ''}_Add@74ls4k`} {...this.props} javaInterface={javaInterface} data={this.props.data} visiable={this.state.addVisiable} setId={this.state.setId} isSaveAs={this.state.isSaveAs} setStateData={this.setStateData} onLoad={this.props.onLoad} AddExtend={AddExtend} />
                    {

                        layoutType == 'theme' && showSharing == true && rewriteShareComponent != true ? (
                            <React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_React.Fragment@8pdpfo`}>
                                {
                                    WeaPortalShareComponent ? (
                                        <WeaPortalShareComponent ecId={`${this && this.props && this.props.ecId || ''}_WeaPortalShareComponent@cep2so`} ref={share => this.share = share} />
                                    ) : (
                                        <WeaPortalShare ecId={`${this && this.props && this.props.ecId || ''}_WeaPortalShare@gtyxow`} ref={share => this.share = share} />
                                    )
                                }
                            </React.Fragment>
                        ) : null
                    }
                </div>
            </WeaDialog>
            );
    }
}
export default Setting;
